<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="70px">
      <el-form-item label="单据时间" prop="processCode">
        <el-input
          v-model="queryParams.processCode"
          placeholder="请输入工序编码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="收货人" prop="enableFlag">
        <el-input
          v-model="queryParams.enableFlag"
          placeholder="请输入是否启用"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="会员名称" prop="enableFlag">
        <el-input
          v-model="queryParams.enableFlag"
          placeholder="请输入是否启用"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="平台单号" prop="enableFlag">
        <el-input
          v-model="queryParams.enableFlag"
          placeholder="请输入是否启用"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="平台单号" prop="enableFlag">
        <el-input
          v-model="queryParams.enableFlag"
          placeholder="请输入是否启用"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['mes:pro:process:edit']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="handleUpdate"
          v-hasPermi="['mes:pro:process:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleDelete"
          v-hasPermi="['mes:pro:process:edit']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          plain
          icon="el-icon-download"
          size="mini"
        >授权</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          plain
          icon="el-icon-download"
          size="mini"
        >验证</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          plain
          icon="el-icon-download"
          size="mini"
        >设置订购到期提醒时间</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          plain
          icon="el-icon-download"
          size="mini"
        >店铺导入</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <div class="app-container-main">
      <vxe-table
        border
        stripe
        v-loading="loading" 
        ref="tableRef"
        size="small"
        header-align="center"
        :row-config="rowConfig"
        :column-config="columnConfig"
        :data="tableData"
        >
        <!-- @checkbox-change="checkboxChangeEvent"
        @checkbox-all="checkboxAll"
        @cell-click="cellClickEvent" -->
        <!-- <vxe-column type="checkbox" width="80" fixed="left" drag-sort></vxe-column> -->
        <vxe-column field="date" width="150" show-overflow="title" align="center" title="采购单据编号"></vxe-column>
        <vxe-column field="name" width="100" show-overflow="title" align="center" title="单据状态"></vxe-column>
        <vxe-column field="province" show-overflow="title" align="center" title="需求仓库" ></vxe-column>
        <vxe-column field="city" width="150" show-overflow="title" align="center" title="采购单据编号"></vxe-column>
        <vxe-column field="address" width="100" show-overflow="title" align="center" title="单据状态"></vxe-column>
        <vxe-column field="zip" show-overflow="title" align="center" title="需求仓库" ></vxe-column>
        <!-- <vxe-column field="poType" width="160" show-overflow="title" align="center" title="采购申请类型">
          <template #default="{ row }">
            <dict-tag :options="dict.type.purchase_request_status" :value="row.poType" />
          </template>
        </vxe-column> -->

      </vxe-table>

      <pagination
        v-show="total>=0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>


    <div class="app-container-footer">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" :lazy="true">
        <el-tab-pane label="采购订单明细" name="1"></el-tab-pane>
        <el-tab-pane label="采购收货（入库）" name="2">采购收货（入库）</el-tab-pane>
        <el-tab-pane label="退货明细" name="3">退货明细</el-tab-pane>
        <el-tab-pane label="付款单" name="4"></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import receiptInformation from './components/receiptInformation.vue'
export default {
  name: 'Member',
  components:{
    receiptInformation
  },
  data() {
    return {
      loading: false,
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        begainTime: '',
        endTime: '',
      },
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      total: 0,
      activeIndex: 8,
      activeName: '1',
      columnConfig: {
        drag: true,
        resizable: true,
        storage: true,
        sortConfig: {
          trigger: 'cell',
          remote: true
        },
        align: 'center',
        headerAlign: 'center'
      },
      rowConfig: {
        drag: true,
        keyField: 'id',
        isHover: true,
        isCurrent: true,
      },
    }
  },
  created() {

  },
  methods: {
    getList() {
      console.log('11');
    },
    handleQuery(){
      console.log(this.queryParams, this.statusList);
    },
    resetQuery(){
      console.log('11');
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleAdd(){

    },
    handleUpdate(){

    },
    handleDelete(){

    },
  }
}
</script>

<style scoped>
::v-deep.el-date-editor.el-input {
  width: 264px;
}
</style>

<style lang="scss" scoped>
.app-container{
  &-main{
    // height: 600px;
  }
  &-footer{
    margin-top: 20px;
    &-title{
      display: flex;
      margin-bottom: 20px;
      &-item{
        cursor: pointer;
        padding: 5px 20px;
        border-radius: 8px;
      }
      .active{
        background-color: aqua;
      }
    }
  }
}
</style>